<!--
 * @Descripttion: 合并组件
 * @version: 0.0.1
 * @Author: zhangmeng
 * @Date: 2022-02-19 16:16:47
 * @LastEditors: zhangmeng
 * @LastEditTime: 2022-03-17 16:14:27
-->
<template>
  <div class="tool-combination">
    <div
      class="tool-combination-content"
      :style="{
        transform: `scaleX(${xscale}) scaleY(${yscale})`,
      }"
    >
      <div
        class="tool-combination-child"
        v-for="item in childs"
        :key="item.id"
        :ref="item.id"
        :style="{
          width: `${item.w}px`,
          height: `${item.h}px`,
          top: `${item.y}px`,
          left: `${item.x}px`,
        }"
      >
        <component :is="item.name" :config="item.config" :count="item.count" />
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-combination",
  mixins: [mixins],
  data() {
    return {
      xscale: 1,
      yscale: 1,
    };
  },
  watch: {
    complex: {
      // 开启深度监听
      deep: true,
      handler(val) {
        this.xscale = val.xscale;
        this.yscale = val.yscale;
      },
    },
    "option.w": {
      handler(val) {
		console.log(val)
        this.changeWidth(val);
      },
    },
    "option.h": {
      handler(val) {
        this.changeHeight(val);
      },
    },
  },
  computed: {
    childs() {
      return this.config.childs;
    },
    origin() {
      return this.$store.state.design.origin;
    },
  },
  methods: {
    // 修改组件内子元素的位置以及宽高
    changeWidth(val) {
      if (this.origin) {
        this.option.xscale = val / this.origin.w;
        this.xscale = val / this.origin.w;
      }
    },
    // 修改组件内子元素的位置以及宽高
    changeHeight(val) {
      if (this.origin) {
        this.option.yscale = val / this.origin.h;
        this.yscale = val / this.origin.h;
      }
    },
  },
  pageData: {
    version: "0.0.1",
    hidden: true, // 非功能组件,hidden属性可隐藏
    name: "tool-combination",
    title: "组合",
    count: 0,
    width: 200,
    height: 60,
    config: {
      label: "组合",
      childs: [],
      attr: [],
    },
  },
};
</script>
<style scoped lang="scss">
.tool-combination {
  width: 100%;
  height: 100%;

  .tool-combination-content {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
  }

  .tool-combination-child {
    position: absolute;
  }
}
</style>
